<template>
    <div class="order-index">
        <!-- 头部添加 -->
        <header>
            <el-button color="#da9233">添加</el-button>
        </header>
        <main v-loading="loading">
            <el-card style="height: 100%">
                <el-table
                    :header-cell-style="{ 'text-align': 'center' }"
                    :cell-style="{ 'text-align': 'center' }"
                    :data="tableData"
                    max-height="480"
                    stripe
                    style="width: 100%"
                    ><el-table-column
                        prop="order_id"
                        label="订单编号"
                        width="230"
                    />
                    <el-table-column prop="uid" label="用户id" width="230" />
                    <el-table-column
                        prop="total_price"
                        label="总价"
                        width="230"
                    />

                    <el-table-column label="支付状态" width="260">
                        <template #default="scope">
                            <span v-if="scope.row.is_pay == 1">已下单</span>
                            <span v-else>已支付</span>
                        </template>
                    </el-table-column>
                    <el-table-column fixed="right" label="操作" width="230">
                        <template #default>
                            <el-button link type="primary" size="small"
                                >详情</el-button
                            >
                            <el-button link type="primary" size="small"
                                >删除</el-button
                            >
                        </template>
                    </el-table-column>
                </el-table></el-card
            >
        </main>
        <!-- 底部 -->
        <footer>
            <el-pagination
                layout="prev, pager, next"
                :total="tablePage.total"
                :current-page="tablePage.pageNum"
                :page-size="tablePage.pageSize"
                @current-change="handlePageChange"
            />
        </footer>
    </div>
</template>

<script setup>
import { onMounted, ref, reactive } from 'vue'
import { findOrder } from '../../apis/order'

const tableData = ref([])
const tablePage = reactive({
    pageNum: 1, // 第几页
    pageSize: 11, // 每页多少条
    total: 0, // 总记录数
})
let loading = ref(true)
onMounted(() => {
    findOrder().then(res => {
        tableData.value = res.sub
        tablePage.total = res.count
        loading.value = false
    })
})
const handlePageChange = currentPage => {
    loading.value = true
    tablePage.pageNum = currentPage
    findOrder(tablePage.pageNum).then(res => {
        tableData.value = res.sub
        tablePage.total = res.count
        loading.value = false
    })
    // 在此刷新数据
}
</script>

<style lang="scss" scoped>
.order-index {
    header {
        height: 35px;
        display: flex;
        flex-direction: row;
        justify-content: flex-end;
        align-items: center;
    }
    main {
        height: 500px;
    }
    footer {
        margin-top: 5px;
        width: 100%;
        display: flex;
        justify-content: center;
        align-items: center;
    }
}
</style>
